<template>
 <div class="wp-tab-box">
       <div class="wp-tab-box__btn">
      <el-button
type="warning" icon="el-icon-plus" @click.native="toCreate">创建回访</el-button>
    </div>
    <div class="wp-tabel">
    <el-table
       max-height="300"
       highlight-current-row
       stripe
       :data="list"
        empty-text="暂无回访记录">
      <el-table-column label="回访编号" prop="visitCode">
          <template slot-scope="scope">
            <el-link
              type="primary"
              @click="toDetail(scope.row)"
              >{{ scope.row.visitCode }}</el-link>
          </template>
      </el-table-column>
      <el-table-column label="回访时间"   prop="visitPlanDate">
        <template slot-scope="scope">
          {{scope.row.visitPlanDate | FormatDate('yyyy-MM-dd')}}
        </template>
      </el-table-column>
      <el-table-column label="完成时间"  width="120" prop="visitCompletionDate">
        <template slot-scope="scope">
          {{scope.row.visitCompletionDate | FormatDate('yyyy-MM-dd')}}
        </template>
      </el-table-column>
      <el-table-column label="回访人" prop="chargePersonName"></el-table-column>
      <el-table-column label="回访分类" prop="visitReasonType" :formatter="formatterVisitReasonTypes"></el-table-column>
      <el-table-column label="回访方式" prop="visitTypeName"></el-table-column>
      <el-table-column label="回访状态" prop="status" :formatter="formatterStatus"></el-table-column>
    </el-table>
     <Drawer  ref="custoemrVisitDrawer" width="60%">
       <div style="padding:50px 10px">
        <el-form :model="customerVisitInfo" ref="customerVisitRef" label-width="100px" :rules="rules">
              <el-row>
              <el-col :span="12">
                <el-form-item label="客户" prop="customerName">
                    <el-input disabled v-model="customerVisitInfo.customerName" placeholder="客户"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="客户联系人" prop="contactsCode">
                  <PopoverSearch clearable ref="contractsRef"  :showMoreBtn="false" placeholder="+添加联系人" type='customerSigner' :params="{customerCode:customerInfo.customerCode}"     v-model="customerVisitInfo.contactsCode" valueKey="contactsCode" lableKey="contactsName" :name.sync="customerVisitInfo.contactsName"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                    <el-form-item label="回访方式" prop="visitType">
                      <el-select class="wp-form-280" v-model="customerVisitInfo.visitType" placeholder="请选择">
                        <el-option v-for="(item,index) in visitTypes" :key="index" :value="item.bizValue" :label="item.bizName"></el-option>
                      </el-select>
                    </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="回访分类" prop="visitReasonType">
                      <el-select class="wp-form-280" @change="selectVisitReasonType" v-model="customerVisitInfo.visitReasonType" placeholder="请选择">
                        <el-option v-for="(item,index) in visitReasonTypes" :key="index" :value="item.value" :label="item.label"></el-option>
                      </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                    <el-form-item label="关联单号" prop="relationNo" :rules="{required: customerVisitInfo.visitReasonType===1||customerVisitInfo.visitReasonType===2, message: '不能为空', trigger: 'blur' }">
                      <PopoverSearch ref="visitReasonTypeRef" clearable  v-if="customerVisitInfo.visitReasonType===1" :params="{customerCode:customerVisitInfo.customerCode}" type='contract' placeholder="+添加合同" v-model="customerVisitInfo.relationNo" lableKey="contractNo" valueKey="contractNo"/>
                      <PopoverSearch ref="visitReasonTypeRef" clearable  v-else-if="customerVisitInfo.visitReasonType===2" :params="{customerCode:customerVisitInfo.customerCode}" type='salesOrder' placeholder="+添加订单" v-model="customerVisitInfo.relationNo" lableKey="orderNo" valueKey="orderNo"/>
                      <el-input class="wp-form-280"   v-else v-model="customerVisitInfo.relationNo" placeholder="关联订单或合同号"></el-input>
                    </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="回访原因" prop="visitReason">
                    <el-input class="wp-form-280" clearable v-model="customerVisitInfo.visitReason" placeholder="回访原因"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="回访人" prop="chargePerson">
                    <Employee-seach :employeeCode.sync="customerVisitInfo.chargePerson" :employeeName.sync="customerVisitInfo.chargePersonName"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="回访时间" prop="visitPlanDate">
                  <el-date-picker style="width:280px" v-model="customerVisitInfo.visitPlanDate" value-format="yyyy-MM-dd HH:mm:ss" placeholder="回访时间"></el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                  <el-form-item label="客户满意度" prop="customerSatisfaction" :rules="{ required: customerVisitInfo.status===1, message: '不能为空', trigger: 'blur' }">
                    <el-select class="wp-form-280" v-model="customerVisitInfo.customerSatisfaction" placeholder="请选择">
                      <el-option v-for="(item,index) in satisfactions" :key="index" :value="item.value" :label="item.label"></el-option>
                    </el-select>
                  </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="回访状态" prop="status">
                <el-select class="wp-form-280" @change="selectStatus" v-model="customerVisitInfo.status" placeholder="请选择">
                  <el-option label="未完成" :value="0"></el-option>
                  <el-option label="已完成" :value="1"></el-option>
                </el-select>
              </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="客户反馈">
                  <el-input class="wp-form-280" type="textarea" v-model="customerVisitInfo.customerFeedback" placeholder=""></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
              <el-form-item label="完成时间" prop="visitCompletionDate" v-if="customerVisitInfo.status==1" :rules="{ required: true, message: '不能为空', trigger: 'blur' }">
                <el-date-picker style="width:280px" v-model="customerVisitInfo.visitCompletionDate" value-format="yyyy-MM-dd HH:mm:ss" placeholder=""></el-date-picker>
              </el-form-item>
              </el-col>
            </el-row>
        </el-form>
        <div style="text-align: center;">
            <el-button type="" @click="closeDrawer">取 消</el-button>
            <el-button type="success" @click="save">确 定</el-button>
        </div>
        </div>
    </Drawer>
    </div>
 </div>
</template>
<script>
import {mapGetters} from 'vuex'
import EmployeeSeach from '@/views/components/EmployeeSeach'
import PopoverSearch from '@/views/components/popoverSearch'
import Drawer from '@/components/Drawer'
import Mixins from '../mixins'
export default {
  props: {
    param: {type: Object,
      default: () => {
        return {}
      }}
  },
  components: { Drawer, EmployeeSeach, PopoverSearch },
  mixins: [Mixins],
  mounted () {
    this.$store.dispatch('common/RefreshDic', 'visitType')
  },
  computed: {
    ...mapGetters([
      'visitTypes'
    ])
  },
  watch: {
    param: {
      handler (val) {
        this.customerInfo = {...val}
        this.customerVisitInfo.customerCode = val.customerCode
        this.customerVisitInfo.customerName = val.customerName
      },
      deep: true,
      immediate: true
    }
  },
  data () {
    return {
      list: [],
      customerInfo: {},
      customerVisitInfo: {},
      satisfactions: [{value: 5, label: '很满意'}, {value: 4, label: '满意'}, {value: 3, label: '一般'}, {value: 2, label: '不满意'}, {value: 1, label: '很不满意'}],
      visitReasonTypes: [{value: 1, label: '合同'}, {value: 2, label: '订单'}, {value: 3, label: '普通回访'}],
      rules: {
        customerName: [{ required: true, message: '不能为空', trigger: 'blur' }],
        visitType: [{ required: true, message: '不能为空', trigger: 'blur' }],
        chargePerson: [{ required: true, message: '不能为空', trigger: 'blur' }],
        visitPlanDate: [{ required: true, message: '不能为空', trigger: 'blur' }],
        visitReasonType: [{ required: true, message: '不能为空', trigger: 'blur' }],
        status: [{ required: true, message: '不能为空', trigger: 'blur' }]
      }
    }
  },
  created () {
    this.getCustomerVisitInfoList(this.customerInfo)
  },
  methods: {
    getCustomerVisitInfoList (customerInfo) {
      this.requestOption('getCustomerVisitInfoList', customerInfo.customerCode, (res) => {
        this.list = res.data || []
      })
    },
    toCreate () {
      this.customerVisitInfo = {}
      this.customerVisitInfo.customerName = this.customerInfo.customerName
      this.customerVisitInfo.customerCode = this.customerInfo.customerCode
      this.$refs.custoemrVisitDrawer.show()
    },
    selectVisitReasonType (val) {
      this.$set(this.customerVisitInfo, 'relationNo', null)
    },
    selectStatus (val) {
      this.$set(this.customerVisitInfo, 'visitCompletionDate', null)
    },
    toDetail (row) {
      this.customerVisitInfo = {...row}
      this.$refs.custoemrVisitDrawer.show()
    },
    formatterVisitReasonTypes (row, column, cellValue, index) {
      const visitReasonType = this.visitReasonTypes.find(item => {
        return item.value === cellValue
      })
      return visitReasonType && visitReasonType.label ? visitReasonType.label : cellValue
    },
    formatterStatus (row, column, cellValue, index) {
      return cellValue && cellValue === 1 ? '已完成' : '未完成'
    },
    closeDrawer () {
      this.$refs.custoemrVisitDrawer.close()
    },
    save () {
      this.$refs.customerVisitRef.validate(validate => {
        if (validate) {
          this.requestOption(this.customerVisitInfo.visitCode ? 'updateCustomerVisitInfo' : 'saveCustomerVisitInfo', this.customerVisitInfo, res => {
            if (res.code === 0) {
              this.getCustomerVisitInfoList(this.customerInfo)
              this.closeDrawer()
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.wp-tab-box{
  &__btn{
  text-align: right;
  margin: 5px;
  }
}
</style>
